<template>
  <el-container class="main-container">
    <!--头部-->
    <el-header height="45px">
      <span class="header-item">经费管理系统</span>

      <el-link class="list-top-item2" style="color: white" :underline="false" @click="toMainList">收支情况</el-link>

      <el-link class="list-top-item" style="color: white" :underline="false" @click="toHistoryList">收支历史</el-link>

      <el-link class="list-top-item2" style="color: white" :underline="false" @click="toComparedList">收支对比</el-link>

      <div class="right-top">
        <el-link class="list-top-item3" style="color: white" :underline="false" @click="toUserList">用户管理</el-link>

        <el-dropdown>
          <span class="el-dropdown-link"><i class="el-icon-user-solid"></i><span class="el-dropdown-link2">{{ this.$store.state.user.loginName }} </span></span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item icon="el-icon-switch-button"  @click.native="logout">退出/注销</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </div>
    </el-header>

    <el-container>
      <el-aside style="width: 15%" class="left-group"></el-aside>

      <!--主要内容-->
      <el-main>
        <div>
          <!--面包屑-->
          <el-breadcrumb separator="/" class="users-breadcrumb">
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>收支历史</el-breadcrumb-item>
          </el-breadcrumb>

          <!--折线图-->
          <div id="history" style="width: 100%;height: 600px"></div>

        </div>
      </el-main>


      <el-aside style="width: 15%" class="right-group"></el-aside>
    </el-container>

  </el-container>
</template>

<script>
import {logout} from "@/api/login";

export default {
  name: "historyList",

  mounted() {
      // 基于准备好的dom，初始化echarts实例
      let history = this.$echarts.init(document.getElementById('history'))
      // 绘制图表
    history.setOption(
          {
            title: {
              text: '收支历史情况',
              left: 'center'
            },
            toolbox: {
              show: true,
              feature: {
                dataZoom: {
                  yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              name: '报销日期',

              axisLabel:{
                fontSize:10
              },

              boundaryGap: false,
              data: ['2017-12-25', '2018-05-08', '2018-06-06', '2018-09-04', '2018-011-12', '2019-03-01', '2019-11-05', '2020-01-17', '2020-04-19', '2020-07-03', '2020-12-16', '2021-02-04']
            },
            yAxis: {
              type: 'value',
              name: '剩余总量',
              min: '-1000',

              axisTick:{
                show:'ture'
              },

              axisLine: {
                show: 'true',
              },
            },
            series: [
              {
                type: 'line',
                color: '#E19C9A',
                data: [8200, 6500, 9900, 5300,6150, -980,6100,5800,8720,7620,11350,11200],
              }
            ]
          }
      )
  },


  data(){
    return {
      activeIndex: ''
    }
  },

  methods: {
    toUserList () {
      this.$router.push({ path: '/user' })
    },

    toMainList () {
      this.$router.push({ path: '/main' })
    },

    toHistoryList () {
      this.$router.push({ path: '/history' })
    },

    toComparedList () {
      this.$router.push({ path: '/compared' })
    },
    //退出登陆
    async logout () {
      const res = await this.$confirm('此操作将退出系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出登入'
        })
      })
      if (res === 'confirm') {
        this.$store.commit('REMOVE_INFO')
        logout().then(resp => {
          if (resp) {
            // window.sessionStorage.clear()
            this.$router.push('/login')
          }
        })
      }
    },
  }
}


</script>

<style>
.el-header {
  background-color: #252047;
  color: #333;
  width: 100%;
}
.main-container{
  height: 100%;
}

.header-item{
  float: left;
  line-height: 45px;
  font-size: 22px;
  color: white;
  width: 14%;
  text-align: center;
}

.list-top-item3{
  font-size: 15px;
  color: white;
  width: 80px;
  text-align: center;
  line-height:45px;
}

.right-top{
  height: 42px;
  background-color: #252047;
  float: right;
  margin-right: 10%;
}


.el-dropdown-link {
  cursor: pointer;
  color: white;
  font-size: 25px;
  text-align: center;
  line-height:45px;
}

.el-dropdown-link2 {
  cursor: pointer;
  color: white;
  font-size: 13px;
  text-align: center;
  line-height:45px;
  margin-left: 2px;
}

.left-group, .right-group{
  background-color: #c9d3e7;
}

.list-top-item{
  background-color: red;
  font-size: 15px;
  color: white;
  width: 8%;
  text-align:center;
  line-height:45px;
}

.list-top-item2{
  font-size: 15px;
  color: white;
  width: 8%;
  text-align: center;
  line-height:35px;
}


</style>